<template>
  <div class="geography-list">
    <el-button
      class="upload-position"
      type="primary"
      icon="el-icon-upload"
      size="small"
      @click="goAdd"
    >补录</el-button>
    <el-tabs v-model="active" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in tagArr" :key="index" :label="item.name" :name="item._id"></el-tab-pane>
    </el-tabs>

    <el-table v-loading="loading" :data="totalData" style="width: 100%">
      <el-table-column prop="name" label="中文名称" width="180"></el-table-column>
      <el-table-column prop="alis" label="英文名称" width="180"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="info" size="mini" @click="getDetail(scope.row)">查看</el-button>
          <el-button size="mini" type="danger" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="pageSize"
      :current-page.sync="pageNum"
      :total="total"
      @current-change="fetchData"
      layout="prev, pager, next"
    ></el-pagination>

    <!-- 弹框 -->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-form-item label="贴图">
          <img :src="domain + itemDetailData.src" alt height="64" />
        </el-form-item>
        <el-form-item label="名称">
          <span>{{ itemDetailData.name }}</span>
        </el-form-item>
        <el-form-item label="类别">
          <span>{{ getTypeToString(itemDetailData.tag) }}</span>
        </el-form-item>
        <el-form-item label="介绍">
          <span>{{ itemDetailData.content }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tagArr: [],
      currentTag: "",
      dialogVisible: false,
      loading: false,
      active: "",
      totalData: [], // 获取总数据
      itemDetailData: {},
      origins: [],
      createSciences: [],
      attrs: [],
      pageSize: 10,
      pageNum: 0,
      total: 0
    };
  },
  async activated() {
    await this.getTag();
    this.fetchData();
  },
  watch: {
    "$store.state.version": function() {
      this.fetchData();
    }
  },
  methods: {
    getTypeToString(tagArr) {
      if (!tagArr) {
        return;
      }
      let temp = tagArr.map(val => {
        return val.name;
      });
      return temp.join(",");
    },
    /**
     * @description 获取自然对应的标签
     */
    async getTag() {
      let res = await this.$store.dispatch("getTags", {
        kind: "geographys"
      });
      this.tagArr = res.filter(val => {
        return val.showType != "2";
      });
      this.tagArr.unshift({
        _id: "",
        name: "未添加标签"
      });
      // this.currentTag = this.tagArr[0]._id;
      this.active = this.tagArr[0]._id;
    },
    /**
     * 获取列表数据
     **/
    fetchData() {
      this.loading = true;
      this.axios
        .get("geography", {
          params: {
            version: this.$store.state.version,
            tagId: this.currentTag,
            pageSize: this.pageSize,
            pageNum: this.pageNum - 1
          }
        })
        .then(res => {
          this.totalData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    /**
     * 获取详情数据
     **/
    fetchDetail(id) {
      return this.axios.get("geography/single", {
        params: {
          id
        }
      });
    },
    /**
     * 类别切换
     * @param tab
     */
    handleClick(tab) {
      this.currentTag = tab.name;
      this.fetchData();
    },
    /**
     * 查看按钮点击事件
     * @param row
     * @return {Promise<void>}
     */
    handleEdit(index, row) {
      this.$router.push({
        path: "/GeographyAddorUpdate",
        query: {
          type: "edit",
          id: row._id
        }
      });
    },
    async getDetail(row) {
      let res = await this.fetchDetail(row._id);
      this.itemDetailData = res.data;
      this.dialogVisible = true;
    },
    goAdd() {
      this.$router.push({
        path: "/GeographyAddorUpdate"
      });
    }
  }
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.margin-right-12 {
  display: inline-block;
}
</style>
<style lang="scss" scoped>
.geography-list {
  position: relative;
  padding: 16px;
  .basic-attribute {
    height: 60px !important;
  }
  .margin-right-12 {
    margin-right: 12px;
  }
  .not-have {
    // display: flex;
  }
  .upload-position {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
  }
  .origin-img,
  .material-img {
    width: 32px;
  }
}
</style>
